<template>
  <div class="contain tableCommon">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="序号" width="100" align="center">
        <template #default="scope">
          <span class="white">
            <span>{{
              (compPama.PageIndex - 1) * compPama.PageSize + scope.$index + 1
            }}
              {{ $t("menus.home") }}
            </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="order_code" label="订单号" align="center" width="130">
      </el-table-column>
      <el-table-column prop="name" label="模具名称" show-overflow-tooltip align="center" width="150">
      </el-table-column>
      <el-table-column prop="ctTime" label="创建时间" align="center" min-width="180">
      </el-table-column>
      <el-table-column prop="testTime" label="交付时间" align="center" min-width="180">
      </el-table-column>
      <el-table-column prop="address" label="订单状态" align="center" width="140">
        <template #default="scope">
          <span>
            <span class="designColored" :style="{ color: data.statusColor[scope.row.status] }">{{
              data.getStatus[scope.row.status] }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="订单说明" show-overflow-tooltip align="center" width="250">
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center" width="140">
        <template #default="scope">
          <div flex=" main:center">
            <!-- <div @click="create(scope.row)" class="caozuoStyle" :style="{color:scope.row.status==0?'#345AFF':'#999'}">创建</div> -->
            <!-- :style="{color:scope.row.status==1?'#345AFF':'#999'}" -->
            <div>
              <div @click="edit(scope.row)" class="caozuoStyle">
                {{ scope.row.status == 0 ? "创建" : "编辑" }}
              </div>
            </div>

            <!-- <div @click="delBtn(scope.row)" class="caozuoStyle" style="color:#E6331D">删除</div> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block pagination">
      <el-pagination v-model:currentPage="compPama.PageIndex" v-model:page-size="compPama.PageSize"
        :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <child ref="childComp" :info='chuanzhi' :oneZhi='oneZhi' />
  </div>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { BomList } from "../../request/api";

import child from "../goods/compontent/newDialog.vue";
interface ChildCompType {
  getStatus: StatusType;
  statusColor: StatusType;
}

interface StatusType {
  [key: number]: string;
}
const childComp = ref<any>()
let data = reactive<ChildCompType>({
  getStatus: {
    0: "待设计",
    1: "设计完成",
  },
  statusColor: {
    0: "#FFA300",
    1: "#18a837",
  },
});

const currentPage4 = 1;
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
let total = ref(0);


let tableData = ref([
  // {
  //   date: "2016-05-03",
  //   name: "Tom",
  //   address: "No. 189, Grove St, Los Angeles2222",
  // },
  // {
  //   date: "2016-05-02",
  //   name: "Tom",
  //   address: "No. 189, Grove St, Los Angeles",
  // },
]);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  compPama.PageSize = val;
  getBomList();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  compPama.PageIndex = val;
  getBomList();
};
const compPama = reactive({
  CP_ID: 2,
  EndablePager: 1,
  PageIndex: 1,
  PageSize: 20,
  QueryString: "",
  status: "",
});
const getBomList = () => {
  BomList(compPama).then((res) => {
    console.log(res, "---1--1-1-1-");
    const { ReturnCode, Data } = res;
    if (ReturnCode == 200) {
      console.log(Data, "Data");

      tableData.value = Data;
      console.log(tableData.value, "tableData0000");

      total.value = res.PageCount;
    }
  });
};
const chuanzhi = ref()
const oneZhi = ref()
const edit = (row: any) => {
  console.log(row.name);
  console.log(row.remark);
  chuanzhi.value = row
  oneZhi.value = row.name
  childComp.value.showDio()
};
onMounted(() => {
  getBomList();
});
</script>
<style lang="scss" scoped>
.contain {
  background: #f6f9fd;
  height: 93vh;
  padding: 8px;
  box-sizing: border-box;
  position: relative;
}

.pagination {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.caozuoStyle {
  cursor: pointer;
}
</style>
<style lang="scss">
.tableCommon .el-table .el-scrollbar {
  height: 800px;
  overflow: auto;
}
</style>